import 'package:flutter/material.dart';
import 'package:netflix_social/constants/app_constants.dart';
import 'package:netflix_social/providers/video_provider.dart';
import 'package:netflix_social/theme/app_theme.dart';
import 'package:netflix_social/widgets/category_card.dart';
import 'package:netflix_social/widgets/video_grid_item.dart';
import 'package:provider/provider.dart';

class ExploreTab extends StatefulWidget {
  const ExploreTab({Key? key}) : super(key: key);

  @override
  State<ExploreTab> createState() => _ExploreTabState();
}

class _ExploreTabState extends State<ExploreTab> {
  final List<String> _categories = [
    '电影', '电视剧', '动漫', '综艺', '纪录片', '儿童',
    '喜剧', '动作', '爱情', '惊悚', '科幻', '剧情'
  ];

  String? _selectedCategory;
  bool _isShowingCategoryContent = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.backgroundColor,
      appBar: AppBar(
        backgroundColor: AppTheme.backgroundColor,
        elevation: 0,
        title: Text(
          _isShowingCategoryContent ? _selectedCategory ?? '探索' : '探索',
          style: Theme.of(context).textTheme.headlineSmall,
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              Navigator.pushNamed(context, AppConstants.searchRoute);
            },
          ),
        ],
        leading: _isShowingCategoryContent
            ? IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () {
                  setState(() {
                    _isShowingCategoryContent = false;
                    _selectedCategory = null;
                  });
                },
              )
            : null,
      ),
      body: _isShowingCategoryContent
          ? _buildCategoryContent()
          : _buildCategoriesGrid(),
    );
  }

  Widget _buildCategoriesGrid() {
    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
      ),
      itemCount: _categories.length,
      itemBuilder: (context, index) {
        return CategoryCard(
          category: _categories[index],
          onTap: () {
            setState(() {
              _selectedCategory = _categories[index];
              _isShowingCategoryContent = true;
            });
          },
        );
      },
    );
  }

  Widget _buildCategoryContent() {
    final videoProvider = Provider.of<VideoProvider>(context);
    final categoryVideos = videoProvider.getVideosByCategory(_selectedCategory ?? '');

    if (categoryVideos.isEmpty) {
      return const Center(
        child: Text('暂无内容'),
      );
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            '热门${_selectedCategory}',
            style: Theme.of(context).textTheme.titleLarge,
          ),
        ),
        Expanded(
          child: GridView.builder(
            padding: const EdgeInsets.all(16),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 0.7,
              crossAxisSpacing: 12,
              mainAxisSpacing: 16,
            ),
            itemCount: categoryVideos.length,
            itemBuilder: (context, index) {
              return VideoGridItem(
                video: categoryVideos[index],
                onTap: () {
                  Navigator.pushNamed(
                    context,
                    AppConstants.videoDetailRoute,
                    arguments: categoryVideos[index].id,
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}
